<template>
  <div class="reimbursement-container">
    <ListTab v-model="tabStatus" :show-header="!showMobilePage" :tabs="tabs" is-table @tabClick="handleTabClick" />
    <div :class="{'mobile-table mobile-pt mobile-min-height':showMobilePage}" class="min-fill-page reimbursement-list">
      <DataDisplay :data-list="statisticsList" class="mb16 mobile-data" />
      <div v-if="!showMobilePage" class="filter">
        <FilterInput
          ref="FilterToolRef"
          v-model="paramsObj"
          :filter-list="filterList"
          :default-select-key="defaultSelectKey"
          :drawer-size="800"
          show-search-btn
          is-show-config
          @handelClick="queryClick"
          @queryEmpty="queryEmpty"
          @filterTagStatus="filterTagStatus" />
        <div class="current-user-action-box">
          <el-checkbox v-model="isMyPending" style="margin-right: 20px;" @change="queryClick">待我处理</el-checkbox>
          <el-checkbox v-model="isShowMe" @change="queryClick" >我发起的</el-checkbox>
          <el-checkbox v-model="isMyApproval" @change="queryClick" >我审批的</el-checkbox>
        </div>
        <createBtn v-if="hasRouteAuth('crm:reimbursement:create')" style="margin-right: 10px;" @click.native="toCreate"/>
        <MoreOpeator
          ref="moreOpeatorRef"
          :list="moreOperatorList"
        />
      </div>
      <div class="table-list">
        <div v-loading="listLoading" style="min-height: 300px;">
          <u-table
            v-if="list.items.length"
            ref="tableRef"
            :data="list.items"
            :height="setTableHeight"
            :row-height="rowHeight()"
            :border="true"
            :row-class-name="tableRowClassName"
            beautify-table
            header-drag-style
            use-virtual
            class="fb-table"
            element-loading-text="加载中..."
            empty-text="暂无数据"
            header-cell-class-name="order-data-header-cell"
            fit
            hightlight-current-row
            @select="selectTable"
            @select-all="selectTable"
            @sort-change="sortMethod">
            <u-table-column
              :fixed="selectFixed"
              align="center"
              type="selection"
              width="50"/>
            <u-table-column :min-width="handleTdWidth()" align="left" label="审批单号" label-class-name="diy-cell" class-name="diy-cell">
              <template slot-scope="scope" slot="header">
                <div class="diyHeader">{{ scope.column.label }}</div>
              </template>
              <template slot-scope="scope">
                <processSn :is-expedited="scope.row.isExpedited">
                  <div v-if="scope.row.approvalNo" style="cursor:pointer;color:#406EFF;" @click="toDetail(scope.row)">
                    <ToolTip :content="handleSnNumber(scope.row.approvalNo)" is-can-click @handelClick="toDetail(scope.row)" />
                  </div>
                  <div v-else>--</div>
                </processSn>
              </template>
            </u-table-column>
            <u-table-column :min-width="handleTdWidth(130,180)" align="left" label="报销项目">
              <template slot-scope="scope">
                <ToolTip :content="uniqueFunc(scope.row.project)" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="报销类型" width="80px">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.type" />
              </template>
            </u-table-column>
            <u-table-column align="right" label="总报销金额(元)" min-width="140px" prop="totalReimbursementAmount" sortable="custom">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.totalReimbursementAmount" :price="scope.row.totalReimbursementAmount / 100" placement="top-end" />
              </template>
            </u-table-column>
            <u-table-column align="right" label="实付金额(元)" prop="amount" width="140px" sortable="custom">
              <template slot-scope="scope">
                <PriceColumn :real-val="scope.row.amount" :price="scope.row.amount / 100" placement="top-end"/>
              </template>
            </u-table-column>
            <u-table-column align="left" label="申请人" min-width="80">
              <template slot-scope="scope">
                <CheckUserInfo v-if="scope.row.proposer" :label="scope.row.proposer" :user-id="scope.row.proposerId" />
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="当前节点" min-width="120">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.currentNode" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="当前处理人" min-width="100">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.currentHandler" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="状态">
              <template slot-scope="scope">
                <StatusText
                  v-if="scope.row.status || scope.row.status===0"
                  :color="['#406eff','#fd8546', 'red', '#999', '#31cc9c','#406eff'][scope.row.status]"
                  :text="scope.row.status | reimbursementStatus" />
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="计划支付日期" min-width="130" prop="planPaymentDate" sortable="custom">
              <template slot-scope="scope">
                <ToolTip :content="format(scope.row.planPaymentDate, 'YYYY/MM/DD')" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="实际支付日期" min-width="130" prop="actualPaymentDate" sortable="custom">
              <template slot-scope="scope">
                <ToolTip :content="format(scope.row.actualPaymentDate, 'YYYY/MM/DD')" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="创建人">
              <template slot-scope="scope">
                <CheckUserInfo v-if="scope.row.creator" :label="scope.row.creator" :user-id="scope.row.creatorId" />
                <div v-else>--</div>
              </template>
            </u-table-column>
            <u-table-column align="left" label="申请部门" min-width="130">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.departmentName" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="所属公司" min-width="130">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.companyName" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="所属部门" min-width="130">
              <template slot-scope="scope">
                <ToolTip :content="scope.row.attributionMatrixName" />
              </template>
            </u-table-column>
            <u-table-column align="left" label="创建时间" prop="createTime" min-width="160" sortable="custom">
              <template slot-scope="scope">
                <ToolTip :content="format(scope.row.createTime,'YYYY/MM/DD HH:mm')" />
              </template>
            </u-table-column>
            <u-table-column :width="operateWidth" align="left" label="操作" fixed="right">
              <template slot-scope="scope">
                <div class="flex-center">
                  <div v-if="scope.row.status !== 0 && !showMobilePage" class="button-text br" @click="toDetail(scope.row)">查看</div>
                  <MoreOpeator
                    :list="[
                      {
                        label: '查看',
                        handelClick: () => {toDetail(scope.row)},
                        auth: scope.row.status !== 0 && showMobilePage
                      },{
                        label: '复制',
                        handelClick: () => {handlerCreateNew(scope.row)},
                        disabled: scope.row.status === 0 || !hasRouteAuth('crm:reimbursement:create')
                      },{
                        label: '编辑',
                        handelClick: () => {toEdit(scope.row)},
                        disabled: setEditDisable(scope.row)
                      },{
                        label: '删除',
                        handelClick: () => {toDelete(scope.row)},
                        disabled: setDelDisable(scope.row)
                      }
                    ]"
                  >
                    <div v-if="!showMobilePage" slot="button" class="button-text">更多<i class="el-icon-arrow-down"/></div>
                    <el-image v-else slot="button" :src="operateBtns" class="table-dropdown-img"/>
                  </MoreOpeator>
                </div>
              </template>
            </u-table-column>
          </u-table>
          <EmptyPlaceholder v-else-if="!list.isInit" slot="empty" empty-text="暂无数据" mode="table" style="padding-bottom: 0;" />
        </div>
        <el-row v-if="showMobilePage" type="flex" justify="left">
          <el-pagination
            v-show="list.total > 0"
            :current-page.sync="page"
            :page-size="perPage"
            :total="list.total"
            :small="true"
            :page-sizes="[20, 50, 100, 250, 500]"
            :layout="pageLayout"
            @size-change="handleSizeChange"
            @current-change="handleCurrentChange"
          />
        </el-row>
        <fixed-pagination v-if="list.total > 0 && !showMobilePage || showMobilePage">
          <template v-if="showMobilePage">
            <FilterInput
              ref="FilterToolRef"
              v-model="paramsObj"
              :filter-list="filterList"
              :default-select-key="defaultSelectKey"
              show-search-btn
              show-mobile-icon
              @handelClick="queryClick"
              @queryEmpty="queryEmpty"
              @filterTagStatus="filterTagStatus">
              <div slot="checkGroup">
                <el-checkbox v-model="isMyPending" style="margin-right: 20px;" @change="queryClick">待我处理</el-checkbox>
                <el-checkbox v-model="isShowMe" @change="queryClick" >我发起的</el-checkbox>
                <el-checkbox v-model="isMyApproval" @change="queryClick" >我审批的</el-checkbox>
              </div>
            </FilterInput>
            <MoreOpeator
              ref="moreOpeatorRef"
              :list="moreOperatorList"
              show-mobile-icon
            />
            <createBtn v-if="hasRouteAuth('crm:reimbursement:create')" mobile-table @click.native="toCreate"/>
          </template>
          <template v-else>
            <SelectionNum :select-item="multipleSelectionAll" @clearMixinSelection="clearMixinSelection" />
            <div style="flex: 1;" />
            <el-pagination
              v-show="list.total > 0"
              :current-page.sync="page"
              :page-size="perPage"
              :total="list.total"
              :page-sizes="[20, 50, 100, 250, 500]"
              layout="total, prev, pager, next, sizes, jumper"
              @size-change="handleSizeChange"
              @current-change="handleCurrentChange" />
          </template>
        </fixed-pagination>
      </div>
      <DiversAuditorDialog ref="auditorDialog" :can-empty="false" @handleSender="handleBatchSender" />
      <ApproverChange ref="approverChangeDialog" :business-type="BUSINESS_TYPE.REIMBURSEMENT" :ids="curSelectedId" @changeCallBack="changeCallBack"/>
    </div>
  </div>
</template>
<script>
import axios from 'axios'; // 取消未完成请求
import { hasRouteAuth } from '@/utils/permission';
import { mapState } from 'vuex';
import { CURRENT_NODE_MODULE, OUR_TITLE_MODULE } from '@/utils/const';
// 组件
import ListTab from '@/components/ListTab';
import EmptyPlaceholder from '@/components/EmptyPlaceholder';
import createBtn from '@/components/Common/baseComponent/createBtn';
import DataDisplay from '@/components/Common/baseComponent/dataDisplay';
import MoreOpeator from '@/components/Common/baseComponent/moreOpeator';
import DiversAuditorDialog from '@/components/Common/auditProcess/module/diversAuditorDialog';
// api
import {
  getReimbursementStatistics,
  getReimbursementTabs,
  getReimbursementList,
  deleteReimbursement
} from '@/api/reimbursement';
import { getModuleOurTitle } from '@/api/invoice';
import { getDepartmentAll } from '@/api/config';
import { format } from '@/filters/date';
import { paramsAryToStr, paramsRangeFormat } from '@/utils/paramsFormat';
import { PROCESS_TYPE } from '@/utils/const/process';
import { showModal } from '@/utils/message';
import { energyStatus as reimbursementStatus } from '@/filters/status';
import { commonOptions } from '@/utils/tools';
import copyLink from '@/mixins/copyLink';
import schedule from '@/mixins/schedule';
import TableAdaptive from '@/mixins/tableAdaptive';
import filterObjStoreMixin from '@/mixins/filterObjStore';
import approverChange from '@/mixins/approverChange';
import { expeditedOptions } from '@/filters/status';
// 跨页选中逻辑
import tableSelections from '@/mixins/tableSelections';
import mobileTable from '@/mixins/mobileTable';
import icon_30 from '@/assets/dataDisplay/icon_30.png';
import icon_31 from '@/assets/dataDisplay/icon_31.png';
import icon_32 from '@/assets/dataDisplay/icon_32.png';

export default {
  name: 'Reimbursement',
  filters: { reimbursementStatus },
  components: {
    ListTab,
    EmptyPlaceholder,
    createBtn,
    DataDisplay,
    MoreOpeator,
    DiversAuditorDialog
  },
  mixins: [TableAdaptive, tableSelections, mobileTable, filterObjStoreMixin, copyLink, schedule, approverChange],
  data() {
    return {
      tabs: [],
      list: {
        items: [],
        total: 0,
        isInit: true
      },
      tabStatus: -1,
      page: 1,
      perPage: 20,
      paramsObj: {},
      sortName: '',
      sortType: '',
      listLoading: false,
      deptTreeList: [],
      companyList: [],
      cancelToken: null,
      isShowMe: false,
      isMyApproval: false,
      isMyPending: false,
      statisticsList: [
        { data: null, label: '总报销金额', icon: icon_30 },
        { data: null, label: '实付金额', icon: icon_31 },
        { data: null, label: '冲抵借款欠额', icon: icon_32 }
      ],
      defaultSelectKey: '',
      isUmyTable: true,
      tableRefName: 'tableRef', // 表格的ref名称
      idKey: 'id' // 唯一表示字段
    };
  },
  computed: {
    ...mapState({
      'userInfo': state => state.user.userInfo
    }),
    tableOutsideHeight() {
      return this.showMobilePage ? 256 : 246;
    },
    rangeKeyArr() {
      return [
        { attr: 'createTime', start: 'createTimeStart', end: 'createTimeEnd', type: 'time', addTime: true },
        { attr: 'planPaymentDate', start: 'planPaymentStartDate', end: 'planPaymentEndDate', type: 'time', addTime: true },
        { attr: 'actualPaymentDate', start: 'actualPaymentStartDate', end: 'actualPaymentEndDate', type: 'time', addTime: true },
        { attr: 'amount', start: 'amountStart', end: 'amountEnd', type: 'number' },
        { attr: 'totalReimbursementAmount', start: 'totalReimbursementAmountStart', end: 'totalReimbursementAmountEnd', type: 'number' }
      ];
    },
    arrayKeyArr() {
      return ['departmentIds', 'attributionMatrixIds', 'currentNode'];
    },
    reimbursementTypes() {
      return [
        { value: 0, label: '常规' },
        { value: 1, label: '差旅' }
      ];
    },
    filterList() {
      return [
        // 输入框
        { keyword: 'approvalNo', name: '审批单号', labelWidth: '100px', type: 'input' },
        { keyword: 'project', name: '报销项目', labelWidth: '100px', type: 'input' },
        { keyword: 'currentHandler', name: '当前处理人', labelWidth: '100px', type: 'input' },
        { keyword: 'proposer', name: '申请人', labelWidth: '100px', type: 'input' },
        { keyword: 'amount', name: '实付金额', labelWidth: '100px', type: 'inputRange' },
        { keyword: 'creator', name: '创建人', labelWidth: '100px', type: 'input' },
        { keyword: 'comment', name: '评论', type: 'input', labelWidth: '100px' },
        { keyword: 'approvalComment', name: '审批意见', type: 'input', labelWidth: '100px' },
        { keyword: 'totalReimbursementAmount', name: '总报销金额', labelWidth: '100px', type: 'inputRange' },
        { keyword: 'desc', name: '报销说明', labelWidth: '100px', type: 'input' },
        // 下拉
        { keyword: 'type', name: '报销类型', type: 'select', options: this.reimbursementTypes },
        { keyword: 'status', name: '状态', type: 'select', options: commonOptions },
        {
          keyword: 'departmentIds',
          name: '申请部门',
          type: 'cascaderSelectWithChild',
          childrenVal: 'children',
          options: this.deptTreeList
        },
        {
          keyword: 'attributionMatrixIds',
          name: '所属部门',
          type: 'cascaderSelectWithChild',
          childrenVal: 'children',
          options: this.deptTreeList
        },
        {
          keyword: 'company',
          name: '所属公司',
          type: 'select',
          valueName: 'label',
          options: this.companyList
        },
        {
          keyword: 'currentNode',
          name: '当前节点',
          type: 'loadMoreSelect',
          valueName: 'name',
          directShow: true,
          multiple: true,
          extendParams: { type: CURRENT_NODE_MODULE.REIMBURSEMENT },
          labelName: 'name',
          placeholder: '当前节点',
          searchkeyword: 'keyword',
          apiUrl: 'admin/common/currentNodes'
        },
        { keyword: 'isExpedited', name: '是否加急', type: 'select', options: expeditedOptions },
        // 日期
        { keyword: 'createTime', name: '创建时间', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'planPaymentDate', name: '计划支付日期', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' },
        { keyword: 'actualPaymentDate', name: '实际支付日期', labelWidth: '100px', timeType: 'daterange', type: 'rangeDate' }
      ];
    },
    moreOperatorList() {
      return [
        { label: '批量导出', exportApi: `admin/reimbursement/export`, auth: hasRouteAuth('crm:reimbursement:batchExport'), type: 'export', exportName: '员工报销', isBeforeExport: true, beforeExport: this.exportBeforeExport, refName: 'reimbursementExportRef' },
        { label: '批量抄送', handelClick: this.handleSendMsg },
        { label: '复制链接', handelClick: this.batchCopyLink },
        { label: '批量转交', handelClick: () => this.handleBatchApproverChange(this.BUSINESS_TYPE.REIMBURSEMENT) }
      ];
    }
  },
  watch: {
    list: {
      handler(val) {
        this.$nextTick(() => {
          if (this.setSelectRow) this.setSelectRow(val.items);
        });
      },
      deep: true
    }
  },
  created() {
    this.queryDeptTreeList();
    this.queryCompanyList();
  },
  beforeRouteEnter(to, from, next) {
    const pageList = ['createReimbursement', 'reimbursementEdit', 'reimbursementDetail'];
    to.meta.isChange = pageList.includes(from.name);
    next();
  },
  activated() {
    if (this.$route.query.proposer) {
      this.$set(this.paramsObj, 'proposer', this.$route.query.proposer);
      this.$set(this.paramsObj, 'status', 4);
      this.defaultSelectKey = 'proposer';
    }
    if (this.$route.meta.isChange) {
      this.fetchData();
    } else {
      const hasDefaultPresetFilter = this.$refs.FilterToolRef && this.$refs.FilterToolRef.hasDefaultPresetFilter;
      if (!hasDefaultPresetFilter) {
        this.fetchData(true);
      }
    }
  },
  methods: {
    hasRouteAuth,
    format,
    // 获取部门列表
    queryDeptTreeList() {
      getDepartmentAll().then(res => {
        this.deptTreeList = (res && res.data) || [];
      });
    },
    // 所属公司，数据：通用设置→发票管理→我方抬头数据
    queryCompanyList() {
      getModuleOurTitle(OUR_TITLE_MODULE.REIMBURSEMENT).then(res => {
        if (res.code === 200) {
          const result = [];
          res.data.forEach(item => {
            result.push({
              value: item.id,
              label: item.name,
              isStringVal: true,
              name: '所属公司'
            });
          });
          this.companyList = result;
        }
      });
    },
    uniqueFunc(data) {
      let res = null;
      if (data) {
        const temp = data.split(',');
        res = Array.from(new Set(temp)).join(',');
      }
      return res;
    },
    // 获取统计数据
    queryStatisticalData() {
      const params = this.formatParams();
      getReimbursementStatistics(params).then(res => {
        if (res.code === 200) {
          this.statisticsList = [
            { data: res.data.totalReimbursementAmount, label: '总报销金额', icon: icon_30 },
            { data: res.data.totalPaymentAmount, label: '实付金额', icon: icon_31 },
            { data: res.data.totalWriteOffAmount, label: '冲抵借款欠额', icon: icon_32 }
          ];
        }
      });
    },
    getDetailLink(item) {
      if (!item.status) return null;
      return `${location.origin}#/businessPage/reimbursementDetail?reimbursementId=${item.id}&processId=${item.processId}`;
    },
    exportBeforeExport() {
      const params = this.formatParams();
      if (this.multipleSelectionAll.length) {
        params.ids = this.multipleSelectionAll.map(el => el.id).join(',');
      }
      if (this.$refs.moreOpeatorRef) {
        this.$refs.moreOpeatorRef.btnExport(params, 'reimbursementExportRef');
      }
    },
    handleTabClick(id) {
      this.tabStatus = id;
      this.list = { items: [] };
      this.fetchData(true);
    },
    queryTabs() {
      const params = this.formatParams();
      getReimbursementTabs(params).then(res => {
        if (res.code === 200) {
          this.tabs = res.data;
        }
      });
    },
    sortMethod(a) {
      if (!a.order) {
        this.sortName = '';
        this.sortType = '';
      } else {
        this.sortName = a.prop;
        this.sortType = a.order === 'ascending' ? 1 : -1;
      }
      this.fetchData();
    },
    fetchData(reset = false) {
      if (this.cancelToken) this.cancelToken.cancel('cancel');
      const source = axios.CancelToken.source();// 用于取消请求
      this.cancelToken = source;
      this.queryTabs();
      this.queryStatisticalData();
      this.listLoading = true;
      if (reset) this.page = 1;
      const params = this.formatParams();
      getReimbursementList(params, source.token).then(res => {
        this.listLoading = false;
        if (res.code === 200) {
          this.list = res.data;
        }
        this.list.isInit = false;
      }).catch(_ => {
        this.listLoading = false;
      });
    },
    formatParams() {
      const params = _.cloneDeep(this.paramsObj);
      paramsRangeFormat(this.rangeKeyArr, params);
      paramsAryToStr(this.arrayKeyArr, params);
      params.tabStatus = this.tabStatus;
      params.sortName = this.sortName || '';
      params.sortType = this.sortType || '';
      params.isShowMe = this.isShowMe;
      params.isMyApproval = this.isMyApproval;
      params.isMyPending = this.isMyPending;
      params.page = this.page;
      params.perPage = this.perPage;
      return params;
    },
    setEditDisable(data) {
      return !(data.status === 0 && data.creatorId === this.userInfo.id);
    },
    setDelDisable(data) {
      const statusArr = [0, 2, 3, 5];// 草稿、已撤销、未过审、待提交
      return !(statusArr.includes(data.status) && (data.creatorId === this.userInfo.id || this.hasRouteAuth('crm:reimbursement:delete')));// 除审批中和已完成状态且为创建人或者有删除权限
    },
    toCreate() {
      this.$router.push({
        name: 'createReimbursement'
      });
    },
    toEdit(row) {
      this.$router.push({
        name: 'reimbursementEdit',
        params: {
          id: row.id
        }
      });
    },
    toDetail(row) {
      this.filterObjStore(PROCESS_TYPE.REIMBURSEMENT);
      this.$router.push({
        name: 'reimbursementDetail',
        query: {
          reimbursementId: row.id,
          processId: row.processId,
          fromList: 1
        }
      });
    },
    toDelete(row) {
      showModal('是否确定删除?', '', {
        iconClass: 'del-icon'
      }).then(() => {
        deleteReimbursement(row.id).then(_ => {
          this.$message.success('删除成功');
          if (this.page > 1 && this.perPage * (this.page - 1) + 1 === this.list.total) {
            this.page--;
          }
          this.resetItemSelected(row.id);
          this.fetchData();
        }).catch(err => { console.log(err); });
      }).catch(() => {
        return false;
      });
    },
    queryClick() {
      this.fetchData(true);
    },
    queryEmpty() {
      this.paramsObj = {};
      this.isShowMe = false;
      this.isMyApproval = false;
      this.isMyPending = false;
      this.fetchData(true);
    },
    handleSizeChange(val) {
      this.perPage = val;
      this.fetchData();
    },
    handleCurrentChange(page) {
      this.page = page;
      this.fetchData();
    },
    handlerCreateNew(row) {
      const routeUrl = this.$router.resolve({
        name: 'reimbursementEdit',
        params: { id: row.id },
        query: { reapplyId: row.processId, createNew: 1 }
      });
      window.open(routeUrl.href, '_blank');
    }
  }
};
</script>
<style lang="scss" scoped>
$bgc: #FFBC3D 0, #FD8546 1, #FF4E5F 2, #999 3, #31CC9C 4, #406EFF 5;
.reimbursement-container{
  .reimbursement-list{
    margin: 16px 16px 0 16px;
    background-color: #fff;
    padding: 20px 24px 55px 24px;
  }
  .border-left {
    position: relative;
    padding-left:6px;
    margin-left: 6px;
    &::before {
      content: '';
      position: absolute;
      left: 0;
      top: 50%;
      margin-top: -7px;
      width: 1px;
      background: #ddd;
      height: 14px;
    }
  }
  .filter {
    display: flex;
    align-items: center;
    margin-bottom: 16px;
    position: relative;
    .current-user-action-box {
      position: absolute;
      left: 488px;
      top: 6px;
      display:flex;
      align-items:center;
    }
  }
  .dot {
    width: 4px;
    height: 4px;
    border-radius: 50%;
    margin-right: 5px;
    @each $c, $i in $bgc {
      &.color-#{$i} {
        background: $c;
      }
    }
  }
}
</style>
